<script setup>
import { ref, useAttrs } from "vue";

defineOptions({
  inheritAttrs: false,
});
const attrs = useAttrs();
// 定义一个响应式数据 inputText
const inputText = ref("");
// 定义 props 接收 handleAdd 方法
const props = defineProps({
  handleAdd: Function,
});
// 将inputtext的值传递给父组件
defineExpose({
  inputText,
});
</script>

<template>
  <div id="header">
    <h1>TodoList</h1>
    <input type="text" v-model="inputText" />
    <button v-bind="$attrs">添加</button>
  </div>
</template>

<style scoped>
h1 {
  color: write;
}
#header {
  background-color: #FFCC99;
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  top: 0;
  left: 10%; 
  width: 80%; 
  z-index: 1; 
}
button {
  background-color: #f44336;
  color: white;
  border-radius: 5px;
  border-color: aqua;
  border-width: 3px;
}
input {
  border-radius: 10px;
  border-color: #FFCC00;
  border-width: 5px;
}
</style>
